<template>
  <div id="index">
    <div class="header_sou">
      <input type="text" class="input" placeholder="新品上市" />
    </div>
    <!-- 轮播 -->
    <swiper ref="mySwiper" class="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="(val, index) in array1" :key="index"><img :src="val.image" alt="..." /></swiper-slide>
    </swiper>
    <!--  -->
    <!-- 热卖专区 -->
    <div class="main">
      <div class="rm">
        <div>热卖专区</div>
        <div class="a"><a href="#">查看更多 ></a></div>
      </div>
    </div>
    <!--  -->
    <div id="lb">
      <ul>
        <li v-for="(val, index) in array2" :key="index" v-if="index < 6">
          <div>
            <router-link to="/xq" @click.native="pass(index)"
              ><img :src="val.image" alt="" />
            </router-link>
          </div>
          <div>
            <span>{{ val.wine }}</span>
            <span>￥{{ val.price }}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 精品推荐 -->
    <div id="jp">
      <div class="jp_shang">
        <span>精品推荐</span>
      </div>
      <div class="jp_xia">
        <ul>
          <li v-for="(va, index) in array2" :key="index" v-if="index > 5">
            <div>
              <router-link to="/xq" @click.native="pass(index)"
                ><img :src="va.image" alt=""
              /></router-link>
            </div>
            <div>
              <div>{{ va.text }}</div>
              <div>￥{{ va.price }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 加载 -->
    <div class="jiazz">
      <img src="../../public/img/jiazz.gif" alt="" />
    </div>
  </div>
</template>
 
<style  scoped>
body {
  color: #f6f6f6;
}
#index {
  width: 100%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
/* 搜索框 */
.header_sou {
  width: 100%;
  padding: 0 5%;
  height: 1.333333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #fff;
}
.header_sou input {
  outline: none;
  width: 100%;
  height: 60%;
  padding-left: 0.75rem;
  border-radius: 0.266667rem;
  border: 0.026667rem solid #bfbfbf;
  background: url(../assets/s.png) no-repeat center left 0.08rem;
}
/* 轮播 */
.mySwiper {
  width: 100%;
  margin-top: 50px;
}
.mySwiper img {
  width: 100%;
}

/* 三条杠 */
.carousel-indicators {
  bottom: -0.8rem;
}

/*热卖专区 */
.main {
  width: 100%;
  margin-top: 0.16rem;
}
.rm {
  width: 100%;
  height: 1.333333rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2%;
}
.rm div:nth-child(1) {
  font-size: 0.426667rem;
  color: #544e4c;
}
.rm div:nth-child(2) a {
  font-size: 0.373333rem;
  text-decoration: none;
  color: #a5a5a5;
}

/*  */
#lb {
  width: 100%;
}
#lb ul {
  width: 100%;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
}
#lb ul li {
  width: 47%;
  margin: 1.5% 1.5%;
}
#lb ul li div img {
  width: 100%;
}
#lb ul li div:last-child {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
}
#lb ul li div:last-child span:first-child {
  font-size: 14px;
  color: #544e4c;
}
#lb ul li div:last-child span:last-child {
  font-size: 14px;
  color: #ff2e26;
}
/* 精品推荐 */
/* 精品推荐 */
.jp {
  width: 100%;
}
/* 上 */
.jp_shang {
  width: 100%;
  height: 1.066667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.133333rem;
}
.jp_shang span {
  font-size: 16px;
  color: red;
  position: relative;
}
.jp_shang span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  background: url(../../public/img/ligeee.png) no-repeat;
  background-size: 0.5rem;
  position: absolute;
  left: -45%;
  top: 30%;
}
.jp_shang span::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  background: url(../../public/img/ligeee.png) no-repeat;
  background-size: 0.5rem;
  position: absolute;
  left: 115%;
  top: 30%;
}
/* 下 */
.jp_xia ul {
  width: 100%;
  outline: none;
  box-sizing: border-box;
}
.jp_xia ul li {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-bottom: 10px;
  /* height: 2.666667rem; */
}
.jp_xia ul li div a img {
  width: 100%;
}
.jp_xia ul li div:first-child {
  width: 25%;
}
.jp_xia ul li div:last-child {
  width: 75%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.jp_xia ul li div:last-child div {
  width: 100%;
}
.jp_xia ul li div:last-child div:first-child {
  padding-left: 5%;
  font-size: 16px;
  color: #544e4c;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.jp_xia ul li div:last-child div:last-child {
  padding-left: 5%;
  font-size: 14px;
  color: #ff2e26;
  margin-bottom: 0;
}
/* 加载 */
.jiazz {
  margin-bottom: 100px;
  text-align: center;
}
</style>

<script>
import bus from "@/bus.js";
import $ from "jquery";
export default {
  name: "index",
  data() {
    return {
      swiperOptions: {
        autoplay: true,
        loop: true, //循环播放
      },
      //轮播
      array1: [
        /* { image: "/img/banner.jpg", class1: true, class2: true },
        { image: "/img/banner1.jpg", class1: true, class2: false },
        { image: "/img/banner.jpg", class1: true, class2: false },
        { image: "/img/banner1.jpg", class1: true, class2: false },
        { image: "/img/banner.jpg", class1: true, class2: false }, */
      ],
      //热卖专区
      array2: [
        /* {
          image: "/img/zzrep.jpg",
          wine: "红酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 52度",
          price: 10000,
        },
        {
          image: "/img/zzrep1.jpg",
          wine: "习酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 53度",
          price: 20000,
        },
        {
          image: "/img/zzrep2.jpg",
          wine: "葡萄红酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 54度",
          price: 15000,
        },
        {
          image: "/img/zzrep.jpg",
          wine: "葡萄红酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 55度",
          price: 13000,
        },
        {
          image: "/img/zzrep1.jpg",
          wine: "习酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 56度",
          price: 20000,
        },
        {
          image: "/img/zzrep2.jpg",
          wine: "葡萄红酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 57度",
          price: 15000,
        },
        //
        {
          image: "/img/list_sy.jpg",
          wine: "红酒",
          text: "五粮液股份 万事如意佳品 浓香型白酒礼盒装 整箱装 51度",
          price: 10000,
        },
        {
          image: "/img/list_sy1.jpg",
          wine: "习酒",
          text: "洋河蓝色经典 海之蓝 52度 礼盒装 480ml*2瓶白酒 口感绵柔浓香型 ",
          price: 20000,
        },
        {
          image: "/img/list_sy2.jpg",
          wine: "葡萄红酒",
          text: "水井坊 臻酿八號 52度500ml*6瓶整箱装 ",
          price: 15000,
        },
        {
          image: "/img/list_sy3.jpg",
          wine: "泸州老窖",
          text:
            "泸州老窖 浓香老窖 鉴藏装 白酒 52度 500ml*6瓶 整箱装(内含礼品袋) ",
          price: 13000,
        }, */
      ],
    };
  },
  methods: {
    pass(index) {
      var obj = this.array2[index];
      setTimeout(() => {
        bus.$emit("xx", obj);
      }, 200);
    },
  },
  components: {},
  mounted() {
    this.$axios.get('http://118.178.184.210:3000/index').then((data)=>{
      console.log(data);
      this.array1=JSON.parse(data.data.result.array1)
      this.array2=JSON.parse(data.data.result.array2)
    })
    /* this.$axios.get('http://localhost:3000/index').then((data)=>{
      console.log(JSON.parse(data.data.result.array1));
      this.array1=JSON.parse(data.data.result.array1)
      this.array2=JSON.parse(data.data.result.array2)
    }) */
  },
  /* beforeDestroy() {
    
  }, */
};
</script>
